<%@page contentType="text/html; charset=UTF-8" %>

<div class="page-header">
    <h3>
        <button class="btn btn-default" onclick="back();">
            <span class="glyphicon glyphicon-arrow-left"></span> 返回
        </button>
    </h3>
</div>

<!-- 详细信息 -->
<div id="detailInfo">
    <div class="page-header">
        <h3>详细信息</h3>
    </div>
    <div style="overflow: auto; padding-top:20px;">
        <div style="float:left; border-bottom:1px solid #D5D5D5;">
            <div style="float:left;width: 200px; color: gray;">所有者</div>
            <div style="float:left;width: 200px;"><b text="owner">zhangsan</b></div>
        </div>

        <div style="float:left; border-bottom:1px solid #D5D5D5;margin-left: 50px;">
            <div style="float:left;width: 200px; color: gray;">名称</div>
            <div style="float:left;width: 200px;"><b text="name">发传单</b></div>
        </div>
    </div>
    <div style="overflow: auto; padding-top:20px;">
        <div style="float:left; border-bottom:1px solid #D5D5D5;">
            <div style="float:left;width: 200px; color: gray;">开始日期</div>
            <div style="float:left;width: 200px;"><b text="startDate">2020-10-10</b></div>
        </div>

        <div style="float:left; border-bottom:1px solid #D5D5D5;margin-left: 50px;">
            <div style="float:left;width: 200px; color: gray;">结束日期</div>
            <div style="float:left;width: 200px;"><b text="endDate">2020-10-20</b></div>
        </div>
    </div>
    <div style="overflow: auto; padding-top:20px;">
        <div style="float:left; border-bottom:1px solid #D5D5D5;">
            <div style="float:left;width: 200px; color: gray;">创建者</div>
            <div style="float:left;width: 200px;">
                <b text="createBy">zhangsan&nbsp;&nbsp;</b>
                <small style="font-size: 10px; color: gray;" text="createTime">2017-01-18 10:10:10</small>
            </div>
        </div>
        <div style="float:left; border-bottom:1px solid #D5D5D5;margin-left: 50px;">
            <div style="float:left;width: 200px; color: gray;">修改者</div>
            <div style="float:left;width: 200px;">
                <b text="editBy">zhangsan&nbsp;&nbsp;</b>
                <small style="font-size: 10px; color: gray;" text="editTime">2017-01-18 10:10:10</small>
            </div>
        </div>
    </div>
    <div style="overflow: auto; padding-top:20px;">
        <div style="float:left; border-bottom:1px solid #D5D5D5;">
            <div style="float:left;width: 200px; color: gray;">成本</div>
            <div style="float:left;width: 200px;"><b text="cost">5,000</b></div>
        </div>
    </div>
    <div style="overflow: auto; width:850px;padding-top:20px; border-bottom: 1px solid #D5D5D5;">
        <div style="float:left; width: 200px; color: gray;">描述</div>
        <div style="float:left; width: 650px;">
            <b text="description">
                市场活动Marketing，是指品牌主办或参与的展览会议与公关市场活动，包括自行主办的各类研讨会、客户交流会、演示会、新产品发布会、体验会、答谢会、年会和出席参加并布展或演讲的展览会、研讨会、行业交流会、颁奖典礼等
            </b>
        </div>
    </div>
</div>

<!-- 备注 -->
<%@include file="/WEB-INF/jsp/inc/remark.jsp"%>
<div style="height: 200px;"></div>

<script>
    jQuery(function ($) {
        $.get('/act/getById?id=${param.id}').done(function (data) {
            $('#detailInfo [text]').text(function () {
                return data[$(this).attr("text")];
            });
        });

        function loadRemarks() {
            $.get('/act/remarks?id=${param.id}').done(function (data) {
                let html = "";
                for (let r of data) {
                    html +=
                        `<div style="margin-bottom:20px;">
                            <div style="overflow:auto">
                                <h5 style="width:760px;margin:0;float:left;">${"${r.noteContent}"}</h5>
                                <div style="float:right;">
                                    <span class="glyphicon glyphicon-edit" edit='${"${r.id}"}' style="font-size:20px;cursor:pointer;color:green;"></span>&nbsp;&nbsp;
                                    <span class="glyphicon glyphicon-remove" id='${"${r.id}"}' style="font-size:20px;cursor:pointer;color:red;"></span>
                                </div>
                            </div>
                            <div>
                                <b>${"${r.editPerson || r.notePerson}"}</b>
                                <small>${"${r.editTime || r.noteTime}"}</small>
                            </div>
                            <hr>
                        </div>`
                }

                $("#remarkDiv").html(html);
            });
        }

        loadRemarks();

        $("#saveBtn").click(function () {
            $.post('/act/saveRemark', {
                id: editId,
                noteContent: $("#remark").val(),
                marketingActivitiesId: "${param.id}"
            }).done(function (data) {
                if(data.success) {
                    loadRemarks();
                    // 调用取消按钮的点击事件
                    $("#cancelBtn").trigger("click");
                }
            })
        });

        $("#remarkDiv").on("click", "span.glyphicon-remove", function () {
            if (!confirm("确定删除吗？")) {
                return;
            }

            let id = this.id;
            $.ajax({
                url: '/act/deleteRemark?id='+id,
                type: 'delete',
                success(data) {
                    if (data.success) {
                        loadRemarks();
                    }
                }
            })
        });
    });
</script>